1

Customizing Joomla!'s Default Template

The goal of this document is to instruct users on how to customize the default Joomla! 1.5 template:
“rhuk_milkyway”. To perform some of the changes in this document you may need a File Transfer Protocol client
(FTP client). While chances are this will not be required, many people find it to be a very valuable asset. Further
more, you will need to have Super Administrative access to Joomla!'s administration panel.

This document is rather basic, but it will show you how to change the Joomla! logo, change the template width,
choose from existing color schemes, and remove the footer link that will take site visitors back to Joomla.org.

Changing Rhuk_milkyway's Default Configurations:

Note: Rhuk_milkyway's defalt template

width is not set. It is actually 'fluid'. The
idea behind this is that whatever size
screen the user has, the template will fill
the whole width.

After logging into the Joomla! 1.5 administrative back end, go to: Extensions - > Template Manager (See Figure
1)

Once you are in the Template Manager, select the template. There are two ways to
do this. One is to click the little radio button, and then click 'edit' on the menu that is
at the top of the Template Manager screen. (See Figure 2 & 3)

Figure 2

Figure 1

Figure 3

The other way to open the template's configuration is to simply click on the title, shown in Figure 2.

Before you change any of the settings in the Template Configuration, check to see if the parameters file is
writable. You can do this by changing the file's permissions to 777 via FTP client, or a File Manager Component
for Joomla! to do this. If you experience problems changing the file permissions, check the ownership settings.
Refer to the Joomla! forum (http://forum.joomla.org) for more information.

Params.ini file is unwritable – Figure 4

After setting the params.in file to writable (777), the parameters writable setting will change from 'Unwritable' to
'Writable' (See Figures 4 & 5)

Params.ini is writable – Figure 5

 2

Once you've set set the params.ini file to writable, you can then change the template parameters.
There are three different pre-built parameters. Each has a number of different options.

They are:
Color Variation – The color variation setting changes module outline colors and heading texts.
Background Variation – The background variation setting changes the background color of the template.
Template Width – The template width setting changes the width of the template.

Color Variation Settings:

-Blue Example of the
-Red Color Variation
setting's effect
-Green on modules
-Orange
-Black
-White

Background Variation Settings:

-Blue
-Red
-Green
-Orange
-Black
-White

Template Width Settings:

-Fluid with Maximum
-Medium (930px)
-Small (750px)
-Fluid (Varies with window size – Minimum Size is 750px)

You can chose the settings that best suit your needs and wants. Customizing this template does not stop here,
though. Because the rhuk_milkyway template is released under the GPL license, you can edit anything in it. This
means you can get the template.css and literally change any part of the template you wish.

Once you've selected a setting, you must click either

save or apply for those settings to be reflected on the
user end. (See Figure 6)

Figure 6

How to Change The Joomla! Logo:

The Joomla! logo is located at the top of the template to the left. (See Figure 7)

Header Specs:
File Name: mw_joomla_logo.png
Location: <joomlaroot>/templates/rhuk_milkyway/images/
Size: 298x75px
Type: Transparent PNG

Figure 7

The logo is known to most web developers as a header. Its the heading of the website. It usually contains the
logo of the organization or company that the site represents. This image is in PNG format. The reason for this is
because it is transparent.
 3

If the background color behind this header image was changed, the change would be seen in all the areas of this
logo that are not solid colors. This is done through CSS Z-Index settings. You don't really have to worry about
this, but when you replace this header, it will save you a lot of time and work if you create one that is the same
size (298x75px) and same file format.
I'm going to put a header that I created into this area by creating a new image in imaging editing software. The
image I use will be the same size as the original, and will also be a transparent PNG file.

After you have created a new header file, and saved it as a transparent PNG, you can then upload the new file to
this directory: <joomlaroot>/templates/rhuk_milkyway/images/
I named my new header: my-new-header.png, and then uploaded it into the template's image directory. Now, you
can save yourself some work by naming the file the exact same name as the previous header. This way, you
don't have to change any code. The new image just overwrites the previous one. But if you feel like doing things
differently (particularly for Search Engine Optimization reasons) you will have to edit the CSS call to the existing
header file.

Follow the steps outlined in the 'Changing

rhuk_milkeyway's default configurations' section of this
document to get to rhuk_milkeyway's configuration editing
screen. At the top there are a number of command icons.
One is marked 'Edit CSS'. Click it. (See Figure 8) Figure 8

Listed are a bunch of CSS files. Most of them are color specific. The one we are going to have to change will be
the main CSS file: template.css.

The CSS file we want to edit is known as the main CSS file. This is because the other CSS files are simply files
that add more customization. The main CSS file is the one that contains all the required data for drawing the site
in a web browser. The file name is template.css. (In Joomla! 1.0.X it was called template_css.css).

Note: If the file template.css is not writable, you will not be able to
save any changes. You must change the permissions of this file to
777 before you can edit it. Using an FTP client, go to this directory:
<joomlaroot>/templates/css/
Make the file template.css writable. The CSS editing screen will
display “writable” indicating that the file is now available for editing.

Select the template.css file by clicking the radio button

directly next to it, and then click edit. (See Figure 9)

The next screen you see will be a built-in CSS editor.

On line 82 of the template's CSS code, you will see
this div tag: Figure 9

div#logo {
position: absolute;
left: 0;
top: 0;
float: left;
width: 298px;
height: 75px;
background: url(../images/mw_joomla_logo.png) 0 0 no-repeat;
margin-left: 30px;
margin-top: 25px;
}
 4

As you might guess, the line we want to change is the 7th line in this div tag:

background: url(../images/mw_joomla_logo.png) 0 0 no-repeat;

This line calls the header file mw_joomla_logo.png if we want to call a different file that we've uploaded to the
sever, we'll have to change this line. Usually the new image we upload is in the same directory as the current
image:

<joomlaroot>/templates/rhuk_milkyway/images/

After you've changed the file path so that it exactly reciprocates the new
header file's directory, file path, and file extension (type) you can save the Figure 10
change to the code by clicking the save button on the toolbar. (see Figure 10)

At this point, you should have uploaded a new header file that was the same size as the previous (298x75),
saved it as a transparent PNG, and uploaded it to Rhuk_milkyway's image folder. Then, if you didn't name it the
same name (mw_joomla_logo.png), you should have changed the CSS call to the header image. If you've done
all these things, then the new header image you created should be appearing in the area that the Joomla! logo
was.

Changing Your Favicon:

Many people like to change the favicon (favorite/bookmark image, it appears next to your URL in a browser's
URL input area) of their site. It's a nice way to customize your template and add a little touch of professionalism.
In Joomla! each template has it's own favicon already. Usually it's the Joomla! logo. Some people prefer to build
their own favicons in Adobe Photoshop or The Gimp, but there are other ways to do it to.

The favicon is 16x16 pixels square, and this is the usual file path (and name) to it:

<joomlaroot>/template_name/favicon.ico

There are several websites that allow you to upload your own image and it will automatically resize it for a
favicon, and let you download it. Here are URLs to a few that I found:

http://tools.dynamicdrive.com/favicon/

http://www.degraeve.com/favicon/

Both of these allow you to browse your computer for an image. Then you can upload it. The site automatically
resizes the image and converts it to 'ico' format. You can then download it, and upload it to your own site for use.

Once you've downloaded the favicon.ico file, upload it to this directory:

<joomlaroot>/template_name/

As you upload it, you may get a message asking you to overwrite a file by the same size. This is the Joomla!
favicon file, and you need overwrite it. Once the new favicon been uploaded, you need to go to your browser,
and clear your cache. Browsers cache (download) favicons because they don't expect them to change
frequently. So once the Joomla! favicon has been cached, you'll have to get delete it from your browser's cache
before your new one shows up in its place.
 5

Removing the “Powered By Joomla” Link – and Site Code Validators:

Why should I leave the “Powered By Joomla!” link? Joomla! is an open source, community based project. If
possible, you should leave the link to Joomla.org because when your site visitors see what a pretty site you
have, they'll discover the power of open source community projects. You shouldn't feel embarrassed that your
site is powered by Joomla! Feel proud to have site powered by an award winning Content Management System!

Refer to the steps outlined in: “How to Change The

Joomla! logo:” to get to the rhuk_milkyway's
configuration area. Once there, on the toolbar, click
edit html. (See Figure 11)
Figure 11
When you are in the HTML editor, you're actually looking at PHP code. In fact, you are looking at the
template's index.php file. This file is located in this directory on your server:

<joomlaroot>/templates/rhuk_milkyway/index.php

At the very bottom, line 170-180, you will see this code:

<div id="footer">
<div id="footer_l">
<div id="footer_r">
<p style="float:left; padding-left: 25px;">
<jdoc:include type="modules" name="syndicate" />
</p>
<p style="float:right; padding-right: 25px;">
<?php echo JText::_('Powered by') ?> <a href="http://www.joomla.org">Joomla!</a>.
<?php echo JText::_('Valid') ?> <a href="http://validator.w3.org/check/referer">XHTML</a> <?php echo
JText::_('and') ?> <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>.
</p>
</div>

This is the footer div. If you want to remove the “powered by Joomla!” link, then delete this line:

<?php echo JText::_('Powered by') ?> <a href="http://www.joomla.org">Joomla!</a>.

If you want to remove the site code validators, remove the very next line:

<?php echo JText::_('Valid') ?> <a

href="http://validator.w3.org/check/referer">XHTML</a> <?php echo
JText::_('and') ?> <a href="http://jigsaw.w3.org/css-
validator/check/referer">CSS</a>.
Figure 12
Once the line(s) have been removed, you can save the index.php file by clicking save on the Joomla! tool bar.
(See Figure 12)

Now, say you wanted to add a link to this area. This is really simple. Just use this code:

<?php echo Jtext::_('your unlinked text here') ?> <a href="http://yoursite.com">linked text</a>

Note: When editing CSS, or PHP, I strongly

recommend you use an FTP client and 'back up'
the file by creating a copy of it and using a
different name. If something goes horribly wrong
and you delete the wrong code, you will always
have a replacement file that you can jump back to.